<html>
<head>
  <title></title>
  <style>
    @-webkit-keyframes slidein {
      from {
        margin-left: 100%;
      }
      to {
        margin-left: 0%;
      }
    }
    #div1 {
      -webkit-animation-name: slidein;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: 2;
      -webkit-animation-direction: alternate;
      -webkit-animation-fill-mode: forwards;
    }
    #div1 {
      width: 40px;
      height: 40px;
      position: relative;
      background: #ccc;
      padding: 5px;
    }
  </style>
</head>
<body>
<div id="div1">
  hover
  右移
</div>
</body>
</html>